<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
  <title>小米商城</title>
  <style>
    body {
      background-color: rgb(213, 215, 216, 40%);
    }

    a {
      text-decoration: none;
      display: inline-block;
      padding: 20px 0;
    }

    /* 209010311冯盈宇 */
    #App {
      width: 1526px;
      margin: 0 auto;
    }

    /* 总体宽度 */
    #app {
      position: relative;
      display: flex;
      height: 628px;
    }


    /* 整体布局*/
    ul {
      display: flex;
      background-color: #f5f5f5;
      flex-wrap: wrap;
    }

    /*  209010311冯盈宇 */
    #app>li {


      height: 220px;
      width: 160px;
      background-color: rgb(249, 251, 254);
    }

    /* 左侧大图 */
    .img {
      width: 160px;
      height: 160px;
      margin: 0 auto;
    }

    #app img {
      width: 200px;
    }

    /* 单个手机介绍 */
    .desc {
      width: 214px;
      font-size: 12px;
      height: 18px;
      margin: 0 10px 10px;
      color: #b0b0b0;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
      overflow: hidden;
    }

    /*  209010311冯盈宇 */
    li {
      margin-left: 14px;
      margin-bottom: 14px;
      display: block;
      width: 234px;
      list-style: none;
      background-color: #ffffff;
      height: 300px;
      padding: 0;
    }

    /* 价格样式 */

    .price {
      color: #ff6700;
      text-align: center;
      margin: 0 10px 14px;
    }

    .num {
      text-align: center;
      color: #ff6700;
    }

    #container {
      display: flex;
      height: 618px;
    }

    /* 左侧大图 */
    .banner {
      margin: 0 0 -14px -14px;
      height: 614px;
    }

   
    .bannerimg {
      width: 234px;
    }

    /* 单个手机样式 */
    a:hover {
      transition: all .5s;
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }

    .name {
      font-size: 14px;
      margin: 23px 12px 2px;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <!-- 左侧大图 -->
  <div id="App">
    <div id="container">
      <div id="app1">
        <ul class="banner">
          <li>
            <a href="">
              <img src="./img/60k.jpg" alt="" class="bannerimg">
            </a>
          </li>
        </ul>
      </div>
      <!-- 右侧单个手机框架 -->
      <div id="app">
        <ul>
          <li v-for="(item,index) in Phonelist" class="phone">
            <a href="">
              <div class="img">
                <img :src="item.url" alt="">
              </div>
              <!--  209010311冯盈宇 -->
              <p class="name"> {{item.title}}</p>
              <p class="desc">{{item.desc}}</p>
              <p class="price">
                <span class="num">{{item.num}}</span>
                <span>元</span>
                <span>起</span>
              </p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <script>
    //  209010311冯盈宇
    const app = Vue.createApp({
      data () {
        return {
          Phonelist: [
            // 手机整体信息
            { url: "./img/13.png", title: "Redmi 12c", desc: "高性能长续航，5000万像素超清双摄", num: "699" },
            { url: "./img/13pro.png", title: "Redmi K60", desc: "骁龙8+｜2K 高光直屏｜5500mAh+67W闪充", num: "2499" },
            { url: "./img/cive.png", title: "Redmi K60 Pro", desc: "【第二代骁龙8】狂暴引擎", num: "3299" },
            { url: "./img/k60.png", title: "Redmi Note 12 Pro 极速版", desc: "高通骁龙778G，OLED柔性直屏+一亿像素", num: "1699" },
            { url: "./img/MIX Fold 2.png", title: "Xiaomi 13 限量定制色", desc: "      全新第二代骁龙8｜徕卡专业光学镜头｜徕卡原生双画质 | 6.36″超窄边屏幕｜67W小米澎湃秒充｜徕卡75mm长焦镜头", num: "4999" },
            { url: "./img/Note 12 Pro 极速版.png", title: "Xiaomi 13 Pro", desc: "全新第二代骁龙8｜徕卡专业光学镜头｜徕卡原生双画质 | 2K 专业原色屏｜120W小米澎湃秒充 ｜徕卡75mm长焦镜头", num: "4999" },
            { url: "./img/Note 12 Pro.png", title: "Xiaomi 13", desc: "全新第二代骁龙8｜徕卡专业光学镜头｜徕卡原生双画质 | 6.36″超窄边屏幕｜67W小米澎湃秒充｜徕卡75mm长焦镜头", num: "3999" },
            { url: "./img/Note 12 5G.png", title: "Redmi Note 12 5G", desc: "三星 OLED 护眼屏｜骁龙 5G 芯｜5000mAh 电量", num: "1199" }
          ]
        }
      },
    })
    app.mount("#app")    
  </script>
</body>

</html>